<template>
  <div class="teacher-material-distribution">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>教师教材发放管理</span>
      </div>
      <!-- 教材列表 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="orderId" label="订单编号"></el-table-column>
        <el-table-column prop="textbookId" label="课本编号"></el-table-column>
        <el-table-column prop="number" label="数量"></el-table-column>
        <el-table-column prop="referenceId" label="班级或个人编号"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="primary" size="mini" @click="handleDistribute(scope.$index,scope.row)">发放</el-button>
            <el-button type="danger" size="mini" @click="handleDelete(scope.$index,scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 发放表单（模态框） -->
      <!--      <el-dialog :visible.sync="dialogVisible" title="教材发放">-->
      <!--        <el-form :model="distributeForm">-->
      <!--          <el-form-item label="发放数量" prop="distributeQuantity">-->
      <!--            <el-input-number v-model="distributeForm.distributeQuantity" :min="1" :max="distributeForm.stockQuantity"></el-input-number>-->
      <!--          </el-form-item>-->
      <!--        </el-form>-->
      <!--        <span slot="footer" class="dialog-footer">-->
      <!--          <el-button @click="dialogVisible = false">取消</el-button>-->
      <!--          <el-button type="primary" @click="confirmDistribute">确认发放</el-button>-->
      <!--        </span>-->
      <!--      </el-dialog>-->
      <el-dialog :visible.sync="dialogVisible" title="教材发放">
        <el-form :model="formState.distributeForm" ref="distributeFormRef">
          <el-form-item label="发放数量" prop="distributeQuantity">
            <el-input-number v-model="formState.distributeForm.distributeQuantity" :min="1" :max="formState.distributeForm.stockQuantity"></el-input-number>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
      <el-button @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="confirmDistribute">确认发放</el-button>
    </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script lang="ts" setup>


import {onMounted, ref,reactive} from "vue";
import {getTeacherDistribution} from "@/service/teacher/teacher.service";
import { ElForm } from 'element-plus';

interface TextbookDistribution {
  orderId: number,
  textbookId: number,
  number: number,
  referenceId: number
}

// interface distributeForm {
//   distributeQuantity: number,
//   stockQuantity: number
// }

const distributeForm =ref([{
  distributeQuantity: 0,
  stockQuantity: 100
}])

const handleDistribute = (index: number, row: TextbookDistribution) => {
  console.log(index, row)
  dialogVisible.value = true;
  formState.distributeForm.stockQuantity = row.number; // 假设库存数量等于当前行的数量
  formState.distributeForm.distributeQuantity = 0; // 重置发放数量
}

const handleDelete = (index: number, row: TextbookDistribution) => {
  console.log(index, row)
  tableData.value.splice(index, 1)
}
// const tableData = ref([{
//   orderId: 1,
//   textbookId: 3,
//   number: 10,
//   referenceId: 1,
// }])

const dialogVisible = ref(false);
const formState = reactive({
  distributeForm: {
    distributeQuantity: 0,
    stockQuantity: 100, // 假设初始库存数量为100
  },
});
const distributeFormRef = ref<InstanceType<typeof ElForm> | null>(null);

const closeDialog = () => {
  dialogVisible.value = false;
};

const confirmDistribute = async () => {
  if (distributeFormRef.value) {
    await distributeFormRef.value.validate(async valid => {
      if (valid) {
        // 假设有一个方法用来减少库存
        reduceStock(formState.distributeForm.distributeQuantity);
        // 关闭对话框
        closeDialog();
        // 可能还需要执行其他操作，如发送发放请求等
      } else {
        console.log('表单验证失败!');
      }
    });
  }
};

const reduceStock = (quantity: number) => {
  if (formState.distributeForm.stockQuantity >= quantity) {
    formState.distributeForm.stockQuantity -= quantity;
  } else {
    console.error('库存不足，无法发放');
  }
};


const tableData: TextbookDistribution[] = [
  {
    orderId: 1,
    textbookId: 125,
    number: 10,
    referenceId: 222118
  },
  {
    orderId: 2,
    textbookId: 152,
    number: 10,
    referenceId: 213014
  },
  {
    orderId: 3,
    textbookId: 34,
    number: 10,
    referenceId: 222255
  },
]

// const confirmDistribute = async () => {
//   if (distributeForm.value) {
//     await distributeForm.value.validate(async valid => {
//       if (valid) {
//         // 假设有一个方法用来减少库存
//         reduceStock(formState.distributeForm.distributeQuantity);
//         // 关闭对话框
//         closeDialog();
//         // 可能还需要执行其他操作，如发送发放请求等
//       } else {
//         console.log('表单验证失败!');
//       }
//     });
//   }
// };

onMounted(() => {
  getTeacherDistribution((data: any) => {
    console.log(data)
    tableData.value = []
    for (const textbookDistribution of data.textbookDistributionList) {
      tableData.value.push({
        orderId: textbookDistribution.orderId,
        textbookId: textbookDistribution.textbookId,
        number: textbookDistribution.number,
        referenceId: textbookDistribution.referenceId,
      })
    }
  })
})
// export default {
//   data() {
//     return {
//       tableData: [
//         // 假设从后端API获取的教材列表数据
//         { orderId: '1234567890', textbookId: '数学分析', number: '张三', referenceId: 10 },
//         // 更多教材数据...
//       ],
//       selectedMaterial: null,
//       distributeForm: {
//         distributeQuantity: 1,
//         stockQuantity: 0
//       },
//       dialogVisible: false
//     };
//   },
//   methods: {
//     handleDistribute(material) {
//       this.selectedMaterial = material;
//       this.distributeForm.stockQuantity = material.quantity;
//       this.dialogVisible = true;
//     },
//     confirmDistribute() {
//       // 确认发放逻辑
//       console.log('Distributing:', this.distributeForm.distributeQuantity, 'copies of', this.selectedMaterial.name);
//       // 可以在这里调用API发送数据到后端
//       this.$message.success('教材发放成功！');
//       this.dialogVisible = false;
//       // 更新库存数量
//       this.selectedMaterial.quantity -= this.distributeForm.distributeQuantity;
//     }
//   }
// };
</script>

<style scoped>
.teacher-material-distribution {
  margin: 30px;
}
.box-card {
  width: 100%;
}
</style>